<script setup>
import { toRefs, onMounted, ref, nextTick, compile, computed } from "vue";
import { useRoute } from "vue-router";
import { getConfig, getPorts, postPorts, saveCsv } from "./http/api";
import { ElMessage } from "element-plus";
import { getDate } from "./utils/index.js";
const route = useRoute();
const data = reactive({
  time: {},
  flag: "true",
  settingFlag: false,
  value1: 1,
  options1: [
    {
      label: "COM1",
      value: 1,
    },
  ],
  value2: 1,
  options2: [
    {
      label: "COM1",
      value: 1,
    },
  ],
  checked1: true,
  textarea: "",
  connection: false,
  source: null,
  sourceArr: [],
});
const {
  time,
  source,
  flag,
  settingFlag,
  value1,
  value2,
  options1,
  options2,
  checked1,
  textarea,
  connection,
  sourceArr,
} = toRefs(data);
const textareaRef = ref(null);
const flags = computed(() => {
  console.log(route.path);

  return route.path === "/realtime" ? true : false;
});

onMounted(() => {
  time.value = getDate();
  setInterval(function () {
    time.value = getDate();
  }, 1000);
});
watch(
  () => route.path,
  (newQuery) => {
    flag.value = newQuery === "/realtime" ? true : false;
  },
  {
    immediate: true,
  }
);
function longLink() {
  if (window.EventSource) {
    source.value = new EventSource(
      "http://121.41.120.212:8080/api/oxygen/config/logs"
    );

    source.value.onopen = function (event) {};
    source.value.addEventListener(
      "logs",
      (event) => {
        sourceArr.value.push(event.data);
        if (sourceArr.value.length > 18) {
          sourceArr.value.shift();
        }
        textarea.value = sourceArr.value.join("\n");
        // let data = eval("(" + event.data + ")");
        // console.log(data);
        if (textareaRef.value) {
          textareaRef.value.$refs.textarea.scrollTop = 500;
        }
      },
      false
    );
    source.value.onerror = function (event) {
      source.value.close();
      longLink();
    };
  }
}
const openSetting = () => {
  settingFlag.value = true;
};
const closeSetting = () => {
  settingFlag.value = false;
};
const refresh = () => {
  getPorts().then((res) => {
    if (res["dcs_port"]) {
      options1.value = [];
      res["dcs_port"].map((item) => {
        let param = {
          label: item,
          value: item,
        };
        options1.value.push(param);
      });
    }
    if (res["oxygen_port"]) {
      options2.value = [];
      res["oxygen_port"].map((item) => {
        let param = {
          label: item,
          value: item,
        };
        options2.value.push(param);
      });
    }
  });
};
const connectionClick = () => {
  let param = {
    dcs_port: value1.value,
    oxygen_port: value2.value,
    connection: !connection.value,
  };
  postPorts(param).then((res) => {
    if (res.status == "sucess") {
      ElMessage({
        type: "success",
        message: !connection.value == true ? "连接成功" : "断开成功",
      });
      getConfigs();
      if (!connection.value == true) {
        longLink();
      } else {
        sourceArr.value = [];
        textarea.value = "";
        if (source.value) {
          source.value.close();
        }
      }
    } else {
      ElMessage({
        type: "error",
        message: res.message,
      });
      textarea.value = "";
      sourceArr.value = [];
      if (source.value) {
        source.value.close();
      }
    }
  });
};
const getConfigs = () => {
  refresh();
  nextTick(() => {
    getConfig().then((res) => {
      value1.value = res["dcs_port"];
      value2.value = res["oxygen_port"];
      checked1.value = res["save_to_csv"];
      connection.value = res["connection"];
    });
  });
};
getConfigs();

function changeSave() {
  let param = {
    save_to_csv: checked1.value,
  };
  saveCsv(param).then((res) => {
    if (res.status == "success") {
      ElMessage({
        type: "success",
        message: "保存成功",
      });
    } else {
      ElMessage({
        type: "error",
        message: res.message,
      });
    }
  });
}
function setFocusAtEnd() {
  nextTick(() => {
    console.log(1111111);
    if (textareaRef.value) {
      textareaRef.value.focus(); // 设置焦点
      const textarea = textareaRef.value.$refs.textarea; // 获取原生 textarea 元素
      textarea.selectionStart = textarea.selectionEnd = textarea.value.length; // 设置光标到末尾
    }
  });
}
</script>

<template>
  <div class="app">
    <div class="in">
      <div class="title">
        <div class="img"></div>
        <div class="title-center">
          <div class="left">
            <img src="./assets/img/address.png" alt="" />
            国电电力国能怀安热电有限公司｜柯宁能源科技（南京）有限公司
          </div>
          <div class="center">#2机组氧量在线测量系统</div>
          <div class="right">
            {{
              time.time ? time.time : ""
            }}&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;{{
              time.date ? time.date : "-"
            }}&nbsp;&nbsp;&nbsp;{{ time.week ? time.week : "-" }}
          </div>
        </div>
      </div>
      <div class="label">
        <div class="left">
          <router-link :to="{ path: '/realtime' }"><p>实时数据</p></router-link>
          <router-link :to="{ path: '/history' }"><p>历史数据</p></router-link>
        </div>
        <div class="right" @click="openSetting" v-if="flags">
          <img src="./assets/img/setting.png" alt="" />
          <span>系统设置</span>
        </div>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
    <div class="openSettingDiv" v-show="settingFlag == true">
      <div class="openSetting">
        <div class="setting-label">
          <div class="setting-label-left">
            <p>系统配置</p>
          </div>
          <div class="close" @click="closeSetting"></div>
        </div>
        <div class="setting-content">
          <div class="top">
            <el-row>
              <el-col :span="6">
                <span style="color: #fff">DCS串口 </span>
                <el-select v-model="value1" style="width: 165px">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <span style="color: #fff">氧量/流速串口 </span>
                <el-select v-model="value2" style="width: 165px">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="2"
                ><el-button type="info" @click="refresh">刷新</el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" @click="connectionClick">
                  {{ connection ? "断开" : "连接" }}
                </el-button>
              </el-col>
            </el-row>
          </div>
          <div class="content">
            <el-row>
              <el-col :span="6">
                <el-checkbox
                  @input="scrollToBottom"
                  v-model="checked1"
                  label="保存到CSV文件"
                  size="large"
                  @change="changeSave"
                />
              </el-col>
              <el-col :span="18"></el-col>
            </el-row>
            <el-input
              v-model="textarea"
              :rows="18"
              type="textarea"
              placeholder=""
              class="custom-textarea"
              ref="textareaRef"
              @focus="setFocusAtEnd"
              :readonly="true"
              :disabled="true"
            />
            <!-- <el-row :gutter="20">
            <el-col :span="22"> </el-col>
            <el-col :span="2">
              <el-button type="primary">保存</el-button>
            </el-col>
          </el-row> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app {
  width: 100%;
  height: 100%;
  font-size: 0.8vw;
}
.app .in {
  margin: 0 auto;
  height: 100%;
  background: url("./assets/img/bg.png") center center no-repeat;
  background-size: cover;
  padding: 0 32px;
}
.title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
  .img {
    width: 100%;
    height: 6vh;
    background: url("./assets/img/top.png") center center no-repeat;
    background-size: cover;
  }
  .title-center {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    .left {
      font-size: 1.4vh;
      width: 30vw;
      display: flex;
      justify-content: start;
      align-items: end;
      font-family: PingFang SC;
      font-weight: bold;
      color: #319efd;
      height: 23px;
      position: relative;
      top: 6.3vh;
      img {
        width: 22px;
        height: 22px;
      }
    }
    .right {
      font-size: 1.4vh;
      width: 30vw;
      display: flex;
      justify-content: end;
      align-items: start;
      font-family: PingFang SC;
      font-weight: 400;
      color: #dfe9f6;
      position: relative;
      right: 40px;
    }
    .center {
      font-size: 3.6vh;
      width: 40vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC;
      font-weight: 800;
      line-height: 42px;
      background: linear-gradient(
        0deg,
        rgba(84, 166, 255, 1) 0%,
        rgba(255, 255, 255, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      width: 22px;
      height: 22px;
    }
    span {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #319efd;
      line-height: 15px;
    }
  }
  p {
    width: 100px;
    padding: 6px 0;
    text-align: center;
    color: #daedff;
    background: url("./src/assets/img/active.png") center center no-repeat;
    background-size: 100px 30px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #daedff;
    // background: linear-gradient(
    //   0deg,
    //   rgba(239, 251, 255, 0.34) 0%,
    //   rgba(0, 0, 0, 0.34) 11.9140625%,
    //   rgba(255, 254, 254, 0.34) 100%
    // );
  }
  .active p {
    color: #daedff;
    background: url("./assets/img/title_active.png") center center no-repeat;
    background-size: 100px 30px;
  }
}
.in .content {
  height: 85vh;
}
.openSettingDiv {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.openSetting {
  width: 1212px;
  height: 669px;
  background: url("./assets/img/settingKuang.png") center center no-repeat;
  background-size: cover;
  padding: 32px 15px;
  .setting-label {
    width: 100%;
    min-height: 50px;
    height: 4.7vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close {
      width: 22px;
      height: 22px;
      background: url("./assets/img/close.png") center center no-repeat;
      background-size: cover;
      cursor: pointer;
      margin-right: 64px;
    }
  }
  .setting-label-left {
    width: 21vw;
    min-height: 50px;
    height: 4.7vh;
    position: relative;
    background: url(./assets/img/title-bt.png) center center no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      font-family: Source Han Sans CN;
      font-weight: bold;
      margin-left: 30px;
      font-size: 22px;
      color: #daedff;
      line-height: 27px;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .setting-content {
    width: calc(100% - 130px);
    height: calc(100% - 50px);
    overflow: auto;
    margin: 0 65px;
    padding: 24px;
    .top {
      width: 100%;
      height: 30px;
    }
    .content {
      .el-row {
        padding-top: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-select {
  margin: 0 10px !important;
}
.el-select__wrapper {
  min-height: 25px !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 0.03vw #409eff inset !important;
}
.el-select__placeholder {
  color: #fff !important;
}

.el-tag.el-tag--info {
  --el-tag-bg-color: #11479b;
}
::-webkit-scrollbar {
  display: none;
}
.el-input__wrapper,
.el-input__wrapper:hover,
.el-date-editor.el-input__wrapper {
  height: 25px;
  background-color: transparent !important;
  box-shadow: 0 0 0 0.06vw #409eff inset !important;
}
.top .el-input__inner {
  color: #fff !important;
}
.el-picker-panel__body {
  .el_input__inner {
    color: #000 !important;
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  height: 25px !important;
  margin: 0 10px;
}
.el-button {
  height: 25px !important;
}
.el-button--primary {
  background: url("./assets/img/select.png") center center no-repeat;
  background-size: cover;
}
.el-button--info {
  background: url("./assets/img/info.png") center center no-repeat;
  background-size: cover;
}
:deep(.el-textarea__inner) {
  background-color: #022f60 !important;
  border: 1px solid;
  border-image: linear-gradient(81deg, #00aeff, #74fdf6, #00aeff) 10 10 !important;
  color: #fff !important;
}
.el-checkbox__label {
  color: #ffffff;
}
// .el-textarea__inner {
//   background-color: linear-gradient(0deg, #022f60 0%) !important;
//   // background: linear-gradient(0deg, #022f60 0%) !important;
//   // border: 1px solid;
//   // border-image: linear-gradient(81deg, #00aeff, #74fdf6, #00aeff) 10 10 !important;
//   // background-color: transparent !important;
// }
</style>
